<template>
	<div class="recommend">
		<div class="cw">
			<div class="recommend-top">
				<h3 class="fl">推荐产品</h3>
				<a class="fr" href="javascript:;">更多</a>
			</div>
			<div class="recommend-content">
				<ul class="clearfix">
					<li class="fl" v-for='(item,index) in recommendList'>
						<img :src="item.src" alt="" />
						<h4 v-html='item.title'></h4>
						<span v-html='item.price'></span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				recommendList:[
					{
						src:'/src/assets/img/pc1.jpg',
						title:'产品名称1',
						price:'200RMB'
					},
					{
						src:'/src/assets/img/pc1.jpg',
						title:'产品名称2',
						price:'200RMB'
					},
					{
						src:'/src/assets/img/pc1.jpg',
						title:'产品名称3',
						price:'200RMB'
					},
					{
						src:'/src/assets/img/pc1.jpg',
						title:'产品名称4',
						price:'200RMB'
					}
				]
			}
		},
		created:function(){
			
		}
	}
</script>

<style scoped>
	.recommend-top{
		margin-top:40px;
		border-top:2px solid black;
		height:45px;
		background: black;
	}
	.recommend-top h3,.recommend-top a{
		line-height:43px;
		text-indent:10px;
		color:white;
	}
	.recommend-top a{
		color:white;
		margin-right:10px;		
	}
	.recommend-content{
		margin-top:10px;
		margin-right:-18px;
	}
	.recommend-content li{
		width:290px;
		height:400px;
		text-align: center;
		border:1px solid lightgray;
		margin-right:13px;
		cursor: pointer;
		overflow: hidden;
		transition: .5s;
	}
	.recommend-content img{
		width:288px;
		height:290px;
	}
	.recommend-content li:hover{
		box-shadow: 0 0 25px rgba(0, 0, 0,.4)
	}
	.recommend-content h4{
		font-size: 18px;
		line-height:30px;
		margin-top:10px;
	}
	.recommend-content span{
		font-size: 12px;
	}
</style>